<template>
  <!-- 设备添加 -->
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <el-card
        class="box-card"
        v-for="item in equipmentList"
        :key="item.id"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <p>编码：{{ item.equipmentCode }} {{ item.equipmentName }}</p>
            <el-countdown
              format="DD [天] HH:mm:ss"
              :value="item.time"
              class="time"
              v-if="item.type == 1"
            />
          </div>
        </template>
        <div class="mainContent">
          <img
            :src="item.img"
            class="image"
            :style="item.type == 1 ? 'opacity: 0.5' : 'opacity: 1'"
          />
          <div class="info">
            <p>
              设备状态：<el-tag :type="item.type == 0 ? 'success' : 'info'">{{
                item.type == 0 ? "空闲中" : "生产中"
              }}</el-tag>
            </p>
            <!-- <p>当前产品：{{ item.productName ? item.productName : "无" }}</p> -->
            <div class="productItem">
              <p>当前产品：</p>
              <el-carousel
                height="30px"
                indicator-position="none"
                arrow="never"
                @change="changeCarousel($event, item)"
                v-if="item.equipmentProductsList"
              >
                <el-carousel-item
                  v-for="s_item in item.equipmentProductsList"
                  :key="s_item.id"
                >
                  <p class="productName">
                    {{ s_item.productsName || s_item.name }}
                  </p>
                </el-carousel-item>
              </el-carousel>
              <p v-else>无</p>
            </div>
            <p>当前生产：{{ item.schedulingNum || 0 }}</p>
            <p>生产总数：{{ item.contractNum || 0 }}</p>
            <p>开始时间：{{ item.startTime }}</p>
          </div>
        </div>
        <div class="bottom">
          <el-button
            type="primary"
            class="button"
            text
            v-if="item.type == 1"
            @click="enterData(item)"
            v-auth-button="['enter/equipment']"
            >确认数据</el-button
          >
          <el-button type="primary" class="button" text @click="edit(item)"
            >编辑</el-button
          >
        </div>
      </el-card>
    </el-main>
  </el-container>

  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  ></save-dialog>

  <!-- 录入数据 -->
  <enter-data
    ref="enterData"
    v-if="dialog.enter"
    @success="handleSaveSuccess"
    @closed="dialog.enter = false"
  >
  </enter-data>
</template>

<script>
import saveDialog from './components/save'
import enterData from './components/enterData.vue'
export default {
  name: 'equipment',
  components: {
    saveDialog,
    enterData
  },
  data () {
    return {
      dialog: {
        save: false,
        enter: false
      },
      equipmentList: [],
      timer: null,
      currentIndex: 0,
      schedulingNum: 0,//当前上产数
      contractNum: 0,//生产总数
      startTime: null
    }
  },
  mounted () {
    this.getList()
  },
  unmounted () {
    clearTimeout(this.timer)
  },
  methods: {
    //添加
    add () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open()
      })
    },
    // 编辑
    edit (data) {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('edit').setData(data)
      })
    },

    // 获取设备列表
    async getList () {
      let { data } = await this.$API.produce.equipment.getEquipmentList.get()
      let list = data || []
      list.map(item => {
        if (item.type == 1) {
          item.time = new Date().getTime() + (new Date(item.estimateFinishTime).getTime() - new Date().getTime())
        }

      })
      console.log(list)
      this.equipmentList = list
      this.equipmentList.map(item => {
        // item.sonList && item.sonList.forEach(s_item => {
        //   if(item.id)
        // })
        if (item.equipmentProductsList && item.equipmentProductsList.length != 0) {
          item.schedulingNum = item.equipmentProductsList[0].schedulingNum
          item.contractNum = item.equipmentProductsList[0].contractNum || item.equipmentProductsList[0].schedulingNum
          item.startTime = item.equipmentProductsList[0].createTime
        }
      })
      console.log(this.equipmentList)
      clearTimeout(this.timer)
      this.timer = setInterval(() => {
        this.getList()
      }, 60 * 1000)
    },

    // 产品名称切换
    changeCarousel (index, data) {
      this.currentIndex = index
      // this.schedulingNum = item.sonList[this.currentIndex].schedulingNum
      // this.contractNum = item.sonList[this.currentIndex].contractNum
      this.equipmentList.map(item => {
        // if (item.sonList) {
        data.equipmentProductsList.map(s_item => {
          if (item.id == s_item.equipmentId) {
            item.schedulingNum = data.equipmentProductsList[this.currentIndex].schedulingNum
            item.contractNum = data.equipmentProductsList[this.currentIndex].contractNum || data.equipmentProductsList[this.currentIndex].schedulingNum
            item.startTime = data.equipmentProductsList[this.currentIndex].createTime
          }
        })

        // }
      })

    },

    // 录入数据
    enterData (row) {
      console.log(row)
      this.$confirm('请确认该设备是否已全部生产完, 是否继续确认数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {
          id: row.id,
          schedulingId: row.schedulingId
        }
        let result = await this.$API.produce.equipment.handleEnterData.post(data)
        if (result.code == 200) {
          this.getList()
          this.visible = false
          this.$message.success("操作成功")
        }
      }).catch(() => {

      })

    },

    //本地更新数据
    handleSaveSuccess () {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.nopadding {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  padding: 20px;
}

.box-card {
  // width: 290px;
  flex-basis: calc(100% / 6);
  height: auto;
  margin: 10px 20px 10px 10px;
  // padding-bottom: 10px;
  font-size: 14px;
  &:nth-child(5n) {
    margin-right: 0;
  }
  :deep(.el-card__body) {
    padding: 10px;
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

  .time {
    :deep(.el-statistic__content) {
      font-size: 12px;
    }
    :deep(.el-statistic__number) {
      font-weight: 600;
      color: red;
    }
  }
}
.mainContent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.info {
  margin-right: 10px;

  p {
    // margin: 10px;
    // height: 30px;
    line-height: 2em;
  }
}

.bottom {
  // margin-top: 13px;
  // line-height: 12px;
}

.image {
  width: 30%;
  height: auto;
  display: block;
}

.button {
  padding: 10px;
  // margin-left: 10px;
  float: right;
}

.productItem {
  display: flex;
  flex-wrap: nowrap;
  p {
    white-space: nowrap;
  }
  .el-carousel {
    width: 100%;
  }
  .productName {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
